<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="col00" prop="col00">
              <el-input v-model="queryParams.col00" placeholder="请输入col00" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="col01" prop="col01">
              <el-input v-model="queryParams.col01" placeholder="请输入col01" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="col02" prop="col02">
              <el-input v-model="queryParams.col02" placeholder="请输入col02" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="col03" prop="col03">
              <el-input v-model="queryParams.col03" placeholder="请输入col03" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="col04" prop="col04">
              <el-input v-model="queryParams.col04" placeholder="请输入col04" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="col05" prop="col05">
              <el-input v-model="queryParams.col05" placeholder="请输入col05" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['commission:commissionHeader:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['commission:commissionHeader:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['commission:commissionHeader:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['commission:commissionHeader:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="commissionHeaderList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="col00" align="center" prop="col00" />
        <el-table-column label="col01" align="center" prop="col01" />
        <el-table-column label="col02" align="center" prop="col02" />
        <el-table-column label="col03" align="center" prop="col03" />
        <el-table-column label="col04" align="center" prop="col04" />
        <el-table-column label="col05" align="center" prop="col05" />
        <el-table-column label="col06" align="center" prop="col06" />
        <el-table-column label="col07" align="center" prop="col07" />
        <el-table-column label="col08" align="center" prop="col08" />
        <el-table-column label="col09" align="center" prop="col09" />
        <el-table-column label="col10" align="center" prop="col10" />
        <el-table-column label="col11" align="center" prop="col11" />
        <el-table-column label="col12" align="center" prop="col12" />
        <el-table-column label="col13" align="center" prop="col13" />
        <el-table-column label="col14" align="center" prop="col14" />
        <el-table-column label="col15" align="center" prop="col15" />
        <el-table-column label="col16" align="center" prop="col16" />
        <el-table-column label="col17" align="center" prop="col17" />
        <el-table-column label="col18" align="center" prop="col18" />
        <el-table-column label="col19" align="center" prop="col19" />
        <el-table-column label="col20" align="center" prop="col20" />
        <el-table-column label="col21" align="center" prop="col21" />
        <el-table-column label="col22" align="center" prop="col22" />
        <el-table-column label="col23" align="center" prop="col23" />
        <el-table-column label="col24" align="center" prop="col24" />
        <el-table-column label="col25" align="center" prop="col25" />
        <el-table-column label="col26" align="center" prop="col26" />
        <el-table-column label="col27" align="center" prop="col27" />
        <el-table-column label="col28" align="center" prop="col28" />
        <el-table-column label="col29" align="center" prop="col29" />
        <el-table-column label="col30" align="center" prop="col30" />
        <el-table-column label="col31" align="center" prop="col31" />
        <el-table-column label="col32" align="center" prop="col32" />
        <el-table-column label="col33" align="center" prop="col33" />
        <el-table-column label="col34" align="center" prop="col34" />
        <el-table-column label="col35" align="center" prop="col35" />
        <el-table-column label="col36" align="center" prop="col36" />
        <el-table-column label="col37" align="center" prop="col37" />
        <el-table-column label="col38" align="center" prop="col38" />
        <el-table-column label="col39" align="center" prop="col39" />
        <el-table-column label="col40" align="center" prop="col40" />
        <el-table-column label="col41" align="center" prop="col41" />
        <el-table-column label="col42" align="center" prop="col42" />
        <el-table-column label="col43" align="center" prop="col43" />
        <el-table-column label="col44" align="center" prop="col44" />
        <el-table-column label="col45" align="center" prop="col45" />
        <el-table-column label="col46" align="center" prop="col46" />
        <el-table-column label="col47" align="center" prop="col47" />
        <el-table-column label="col48" align="center" prop="col48" />
        <el-table-column label="col49" align="center" prop="col49" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['commission:commissionHeader:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['commission:commissionHeader:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!-- 添加或修改佣金清单字段对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="commissionHeaderFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="col00" prop="col00">
          <el-input v-model="form.col00" placeholder="请输入col00" />
        </el-form-item>
        <el-form-item label="col01" prop="col01">
          <el-input v-model="form.col01" placeholder="请输入col01" />
        </el-form-item>
        <el-form-item label="col02" prop="col02">
          <el-input v-model="form.col02" placeholder="请输入col02" />
        </el-form-item>
        <el-form-item label="col03" prop="col03">
          <el-input v-model="form.col03" placeholder="请输入col03" />
        </el-form-item>
        <el-form-item label="col04" prop="col04">
          <el-input v-model="form.col04" placeholder="请输入col04" />
        </el-form-item>
        <el-form-item label="col05" prop="col05">
          <el-input v-model="form.col05" placeholder="请输入col05" />
        </el-form-item>
        <el-form-item label="col06" prop="col06">
          <el-input v-model="form.col06" placeholder="请输入col06" />
        </el-form-item>
        <el-form-item label="col07" prop="col07">
          <el-input v-model="form.col07" placeholder="请输入col07" />
        </el-form-item>
        <el-form-item label="col08" prop="col08">
          <el-input v-model="form.col08" placeholder="请输入col08" />
        </el-form-item>
        <el-form-item label="col09" prop="col09">
          <el-input v-model="form.col09" placeholder="请输入col09" />
        </el-form-item>
        <el-form-item label="col10" prop="col10">
          <el-input v-model="form.col10" placeholder="请输入col10" />
        </el-form-item>
        <el-form-item label="col11" prop="col11">
          <el-input v-model="form.col11" placeholder="请输入col11" />
        </el-form-item>
        <el-form-item label="col12" prop="col12">
          <el-input v-model="form.col12" placeholder="请输入col12" />
        </el-form-item>
        <el-form-item label="col13" prop="col13">
          <el-input v-model="form.col13" placeholder="请输入col13" />
        </el-form-item>
        <el-form-item label="col14" prop="col14">
          <el-input v-model="form.col14" placeholder="请输入col14" />
        </el-form-item>
        <el-form-item label="col15" prop="col15">
          <el-input v-model="form.col15" placeholder="请输入col15" />
        </el-form-item>
        <el-form-item label="col16" prop="col16">
          <el-input v-model="form.col16" placeholder="请输入col16" />
        </el-form-item>
        <el-form-item label="col17" prop="col17">
          <el-input v-model="form.col17" placeholder="请输入col17" />
        </el-form-item>
        <el-form-item label="col18" prop="col18">
          <el-input v-model="form.col18" placeholder="请输入col18" />
        </el-form-item>
        <el-form-item label="col19" prop="col19">
          <el-input v-model="form.col19" placeholder="请输入col19" />
        </el-form-item>
        <el-form-item label="col20" prop="col20">
          <el-input v-model="form.col20" placeholder="请输入col20" />
        </el-form-item>
        <el-form-item label="col21" prop="col21">
          <el-input v-model="form.col21" placeholder="请输入col21" />
        </el-form-item>
        <el-form-item label="col22" prop="col22">
          <el-input v-model="form.col22" placeholder="请输入col22" />
        </el-form-item>
        <el-form-item label="col23" prop="col23">
          <el-input v-model="form.col23" placeholder="请输入col23" />
        </el-form-item>
        <el-form-item label="col24" prop="col24">
          <el-input v-model="form.col24" placeholder="请输入col24" />
        </el-form-item>
        <el-form-item label="col25" prop="col25">
          <el-input v-model="form.col25" placeholder="请输入col25" />
        </el-form-item>
        <el-form-item label="col26" prop="col26">
          <el-input v-model="form.col26" placeholder="请输入col26" />
        </el-form-item>
        <el-form-item label="col27" prop="col27">
          <el-input v-model="form.col27" placeholder="请输入col27" />
        </el-form-item>
        <el-form-item label="col28" prop="col28">
          <el-input v-model="form.col28" placeholder="请输入col28" />
        </el-form-item>
        <el-form-item label="col29" prop="col29">
          <el-input v-model="form.col29" placeholder="请输入col29" />
        </el-form-item>
        <el-form-item label="col30" prop="col30">
          <el-input v-model="form.col30" placeholder="请输入col30" />
        </el-form-item>
        <el-form-item label="col31" prop="col31">
          <el-input v-model="form.col31" placeholder="请输入col31" />
        </el-form-item>
        <el-form-item label="col32" prop="col32">
          <el-input v-model="form.col32" placeholder="请输入col32" />
        </el-form-item>
        <el-form-item label="col33" prop="col33">
          <el-input v-model="form.col33" placeholder="请输入col33" />
        </el-form-item>
        <el-form-item label="col34" prop="col34">
          <el-input v-model="form.col34" placeholder="请输入col34" />
        </el-form-item>
        <el-form-item label="col35" prop="col35">
          <el-input v-model="form.col35" placeholder="请输入col35" />
        </el-form-item>
        <el-form-item label="col36" prop="col36">
          <el-input v-model="form.col36" placeholder="请输入col36" />
        </el-form-item>
        <el-form-item label="col37" prop="col37">
          <el-input v-model="form.col37" placeholder="请输入col37" />
        </el-form-item>
        <el-form-item label="col38" prop="col38">
          <el-input v-model="form.col38" placeholder="请输入col38" />
        </el-form-item>
        <el-form-item label="col39" prop="col39">
          <el-input v-model="form.col39" placeholder="请输入col39" />
        </el-form-item>
        <el-form-item label="col40" prop="col40">
          <el-input v-model="form.col40" placeholder="请输入col40" />
        </el-form-item>
        <el-form-item label="col41" prop="col41">
          <el-input v-model="form.col41" placeholder="请输入col41" />
        </el-form-item>
        <el-form-item label="col42" prop="col42">
          <el-input v-model="form.col42" placeholder="请输入col42" />
        </el-form-item>
        <el-form-item label="col43" prop="col43">
          <el-input v-model="form.col43" placeholder="请输入col43" />
        </el-form-item>
        <el-form-item label="col44" prop="col44">
          <el-input v-model="form.col44" placeholder="请输入col44" />
        </el-form-item>
        <el-form-item label="col45" prop="col45">
          <el-input v-model="form.col45" placeholder="请输入col45" />
        </el-form-item>
        <el-form-item label="col46" prop="col46">
          <el-input v-model="form.col46" placeholder="请输入col46" />
        </el-form-item>
        <el-form-item label="col47" prop="col47">
          <el-input v-model="form.col47" placeholder="请输入col47" />
        </el-form-item>
        <el-form-item label="col48" prop="col48">
          <el-input v-model="form.col48" placeholder="请输入col48" />
        </el-form-item>
        <el-form-item label="col49" prop="col49">
          <el-input v-model="form.col49" placeholder="请输入col49" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CommissionHeader" lang="ts">
import { listCommissionHeader, getCommissionHeader, delCommissionHeader, addCommissionHeader, updateCommissionHeader } from '@/api/commission/commissionHeader';
import { CommissionHeaderVO, CommissionHeaderQuery, CommissionHeaderForm } from '@/api/commission/commissionHeader/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const commissionHeaderList = ref<CommissionHeaderVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const commissionHeaderFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: CommissionHeaderForm = {
  id: undefined,
  col00: undefined,
  col01: undefined,
  col02: undefined,
  col03: undefined,
  col04: undefined,
  col05: undefined,
  col06: undefined,
  col07: undefined,
  col08: undefined,
  col09: undefined,
  col10: undefined,
  col11: undefined,
  col12: undefined,
  col13: undefined,
  col14: undefined,
  col15: undefined,
  col16: undefined,
  col17: undefined,
  col18: undefined,
  col19: undefined,
  col20: undefined,
  col21: undefined,
  col22: undefined,
  col23: undefined,
  col24: undefined,
  col25: undefined,
  col26: undefined,
  col27: undefined,
  col28: undefined,
  col29: undefined,
  col30: undefined,
  col31: undefined,
  col32: undefined,
  col33: undefined,
  col34: undefined,
  col35: undefined,
  col36: undefined,
  col37: undefined,
  col38: undefined,
  col39: undefined,
  col40: undefined,
  col41: undefined,
  col42: undefined,
  col43: undefined,
  col44: undefined,
  col45: undefined,
  col46: undefined,
  col47: undefined,
  col48: undefined,
  col49: undefined,
}
const data = reactive<PageData<CommissionHeaderForm, CommissionHeaderQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    col00: undefined,
    col01: undefined,
    col02: undefined,
    col03: undefined,
    col04: undefined,
    col05: undefined,
    col06: undefined,
    col07: undefined,
    col08: undefined,
    col09: undefined,
    col10: undefined,
    col11: undefined,
    col12: undefined,
    col13: undefined,
    col14: undefined,
    col15: undefined,
    col16: undefined,
    col17: undefined,
    col18: undefined,
    col19: undefined,
    col20: undefined,
    col21: undefined,
    col22: undefined,
    col23: undefined,
    col24: undefined,
    col25: undefined,
    col26: undefined,
    col27: undefined,
    col28: undefined,
    col29: undefined,
    col30: undefined,
    col31: undefined,
    col32: undefined,
    col33: undefined,
    col34: undefined,
    col35: undefined,
    col36: undefined,
    col37: undefined,
    col38: undefined,
    col39: undefined,
    col40: undefined,
    col41: undefined,
    col42: undefined,
    col43: undefined,
    col44: undefined,
    col45: undefined,
    col46: undefined,
    col47: undefined,
    col48: undefined,
    col49: undefined,
    params: {
    }
  },
  rules: {
    id: [
      { required: true, message: "ID不能为空", trigger: "blur" }
    ],
    col00: [
      { required: true, message: "col00不能为空", trigger: "blur" }
    ],
    col01: [
      { required: true, message: "col01不能为空", trigger: "blur" }
    ],
    col02: [
      { required: true, message: "col02不能为空", trigger: "blur" }
    ],
    col03: [
      { required: true, message: "col03不能为空", trigger: "blur" }
    ],
    col04: [
      { required: true, message: "col04不能为空", trigger: "blur" }
    ],
    col05: [
      { required: true, message: "col05不能为空", trigger: "blur" }
    ],
    col06: [
      { required: true, message: "col06不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询佣金清单字段列表 */
const getList = async () => {
  loading.value = true;
  const res = await listCommissionHeader(queryParams.value);
  commissionHeaderList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  commissionHeaderFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: CommissionHeaderVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加佣金清单字段";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: CommissionHeaderVO) => {
  reset();
  const _id = row?.id || ids.value[0]
  const res = await getCommissionHeader(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改佣金清单字段";
}

/** 提交按钮 */
const submitForm = () => {
  commissionHeaderFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateCommissionHeader(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addCommissionHeader(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: CommissionHeaderVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除佣金清单字段编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delCommissionHeader(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('commission/commissionHeader/export', {
    ...queryParams.value
  }, `commissionHeader_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getList();
});
</script>
